<template>
    <div class="userlist">
        <!-- <div>userList:{{userList}}</div>
        <div> contact{{ contact }}</div> -->
        <a-menu style="width: 100%; border-right: 0;" mode="vertical">
            <!-- :selectedKeys="selectedKeys" -->
            <a-menu-item style="height: 80px; position: relative; textAlign: left; borderBottom: 1px solid #eee; margin: 0" v-for="(item) in contact"
                :key="getKey(item)" @click="select2(item, getKey(item))">
                <div v-if="item.friendDetail" class="name_box">
                    <img class="friend_portrait" :src="item.friendDetail.avatarurl ? item.friendDetail.avatarurl : headPortraitImg" alt=""
                        @click.stop="alertPersaonCard(item)">
                    <span class="custom-title">{{ item.friendDetail.nickname || item.name }}</span>
                    <!-- <img class="status_img" v-if="dataFlag" :src="getUserOnlineStatus(item.presence)" alt=""> -->
                </div>
                <div v-else class="name_box">
                    <img v-if="type === 'contact'" class="friend_portrait" :src="headPortraitImg" alt="">
                    <span class="custom-title" :class="{ 'custom-title-width': !broken }">{{ item.name }}</span>
                </div>
                <div class="icon-style" v-if="getUnreadNum(item) != 0">
                    <span class="unreadNum">{{ getUnreadNum(item) }}</span>
                </div>
                <!-- <span class="time-style" style="float:right">{{ getLastMsg(item).msgTime }}</span>
                <div class="last-msg">{{ getLastMsg(item).lastMsg }}</div> -->
            </a-menu-item>
        </a-menu>
    </div>
</template>

<script>
import './index.less';
import { mapActions, mapGetters } from 'vuex';
import {getHuanxinUsers} from "@/api/goods/goods"
// import EmediaModal from '../emediaModal/index';
import moment from 'moment';
import _ from 'lodash';
// import AddAVMemberModal from '../emediaModal/addAVMemberModal';
// import MultiAVModal from '../emediaModal/multiAVModal';
// import GetGroupInfo from '../group/groupInfo.vue';

export default {
    data() {
        return {
            activedKey: {
                contact: '',
                // group: '',
                // chatroom: ''
            },
            headPortraitImg: 'https://s1.ax1x.com/2022/11/24/zGLO7q.png',
            showFirendMenus: false,
            firendMenus: [
                {
                    name: '加入黑名单',
                    id: '1',
                    icon: 'add-o'
                },
                {
                    name: '删除好友',
                    id: '2',
                    icon: 'delete'
                }
            ],
            message: '',
            isHttps: window.location.protocol === 'https:',
            loadText: '加载更多',
            status: {
                sending: '发送中',
                sent: '已发送',
                read: '已读'
            },
            isCollapse: true,
            unRead: '',
            dataFlag: false,
            chatlist:[],
            chatlist0:[],
            // selectedKeys: [ this.getKey(this.activedKey[this.type]) ]
        };
    },

    beforeMount() {
        // if(this.type === 'contact'){
        // }
        // else if(this.type === 'group'){
        // 	this.onGetGroupUserList();
        // }
        // else if(this.type === 'chatroom'){
        // 	this.onGetChatroomUserList();
        // }
    },
    mounted() {
        // 取到黑名单列表值将黑名单匹配用户列表进行筛选
        // let blackList = this.$store.state.friendModule.blackList;
        // this.$store.commit('changeUserList', blackList);
    },
    updated() {
        this.scollBottom();
    },
    watch: {
        contact: {
            handler(val) {
                console.log(val, "变了")
                // this.getAllFriendsStatus()
                this.dataFlag = false
                console.log('%c contact', 'color:red;font-size:20px;')
                const params = {
                    usernames: []
                }
                val.forEach(item => {
                    params.usernames.push(item.name)
                })
            },
            // immediate: true,
            deep: true
        },
    },
    computed: {
        ...mapGetters({
            contact: 'onGetContactUserList',
            // group: 'onGetGroupUserList',
            // chatroom: 'onGetChatroomUserList',
            msgList: 'onGetCurrentChatObjMsg'
        }),
        userList() {
            return {
                contact: this.contact
                // .filter(item => {
                // 	if(item && !this.blackList.includes(item.name)){
                // 		return item;
                // 	}
                // }),
                // group: this.group,
                // chatroom: this.chatroom
            };
        },
        chatList() {
            return this.$store.state.chat.msgList;
        },
        selectedKeys() {
            return [this.getKey(this.activedKey[this.type]) || ''];
        }
    },
    props: [
        'type', // 聊天类型 contact, group, chatroom
        'username', // 选中的聊天对象
        'select',
        'card',
        'broken'
    ],
    created() {
        this.getList();
        this.$store.commit('getContactUserList', this.chatlist ); 
        //[{  }]name: "test1"
        console.log(this.userList, "678");
        setTimeout(() => {
            this.onGetContactUserList();
            console.log(this.userList, "788");
            console.log(this.contact, "567")
        }, 500);
    },
    methods: {
        ...mapActions([
            'onGetContactUserList',
            'onGetGroupUserList',
            'onGetChatroomUserList',
            'onGetCurrentChatObjMsg',
            'onSendText',
            'onCallVideo',
            'onCallVoice',
            'getGroupMembers',
            'getHistoryMessage',
            'onAddBlack',
            'onDelteFirend',
            'onGetGroupinfo',
            'recallMessage',
            'onGetGroupBlack',
            'onGetFirendBlack',
            'onGetAllFriendsInfo',
            'getAllFriendsStatus',
            'getSubPresence',
            'subFriendStatus'
        ]),
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        getList() {
            getHuanxinUsers().then(res => {
               console.log(res.data,'jiekoufanhuishuju')
                this.chatlist0 = res.data
                console.log(this.chatlist0,'9999999')
               if (res.data.length > 0) {
                    for (let i = 0; i < res.data.length; i++) {
                        let name = res.data[i]
                        this.chatlist.push({
                            'name': name
                        })
                        console.log(this.chatlist, '编辑图片')
                    }
                    // this.picturesList = this.form.slider
                    // this.form.slider0 = this.picturesList.length > 0 ? this.picturesList.join("|") : null
                }
            });
        },
        getKey(item) {
            let key = '';
            switch (this.type) {
                case 'contact':
                    key = item.name;
                    break;
                case 'group':
                    key = item.groupid;
                    break;
                case 'chatroom':
                    key = item.id;
                    break;
                default:
                    break;
            }
            return key;
        },
        alertPersaonCard(i) {
            if (i.friendDetail) {
                this.card.getOthersUserInfo(i)
            }
        },
        getUnreadNum(item) {
            const { name, params } = this.$route;
            const chatList = this.chatList[name];
            let userId = '';
            if (name == 'contact') {
                userId = item.name;
            }
            else if (name == 'group') {
                userId = item.groupid;
            }
            else {
                userId = item.id;
                return 0;
            }
            const currentMsgs = chatList[userId] || [];
            let unReadNum = 0;
            currentMsgs.forEach(msg => {
                if (msg.status !== 'read' && msg.status !== 'recall' && !msg.bySelf) {
                    unReadNum++;
                }
            });
            return unReadNum;
        },
        select2(key, index) {
            console.log(key, index, '9999')
            this.$data.selectedKeys = [index];
            this.select(key);
            this.$data.activedKey[this.type] = key;
        },
        loadMoreMsgs() {
            const me = this;
            const success = function (msgs) {
                if (msgs.length === 0) {
                    me.$data.loadText = '已无更多数据';
                }
            };
            let name = '';
            let isGroup = false;
            if (this.type === 'contact') {
                name = this.$data.activedKey[this.type].name;
            }
            else if (this.type === 'group') {
                name = this.$data.activedKey[this.type].groupid;
                isGroup = true;
            }
            else if (this.type === 'chatroom') {
                name = this.$data.activedKey[this.type].id;
                isGroup = true;
            }
            this.getHistoryMessage({
                name,
                isGroup,
                success
            });
        },
        changeMenus() {
            if (this.type === 'contact') {
                this.$data.showFirendMenus = !this.$data.showFirendMenus;
            }
            else if (this.type === 'group') {
                this.$refs.groupInfoModel.chengeInfoModel();
                this.getGroupInfo();
            }
        },

        getGroupInfo() {
            this.onGetGroupinfo({
                select_id: this.$data.activedKey[this.type].groupid
            });
        },
        onSendTextMsg() {
            this.onSendText({
                chatType: this.type,
                chatId: this.$data.activedKey[this.type],
                message: this.$data.message
            });
            this.$data.message = '';
        },

        selectEmoji(v) {
            this.$data.message = v;
            this.$refs.txtDom.focus();
        },

        customEmoji(value) {
            return `<img src="https://yl.weilankangyang.com/static/mini_program/images/faces/${value}" style="width:20px"/>`;
        },

        renderTxt(txt = '') {
            let rnTxt = [];
            let match = null;
            const regex = /(\[.*?\])/g;
            let start = 0;
            let index = 0;
            while ((match = regex.exec(txt))) {
                index = match.index;
                if (index > start) {
                    rnTxt.push(txt.substring(start, index));
                }
                if (match[1] in emoji.obj) {
                    const v = emoji.obj[match[1]];
                    rnTxt.push(this.customEmoji(v));
                }
                else {
                    rnTxt.push(match[1]);
                }
                start = index + match[1].length;
            }
            rnTxt.push(txt.substring(start, txt.length));
            return rnTxt.toString().replace(/,/g, '');
        },

        callVideo() {

            if (this.type == 'contact') {
                this.$refs.emediaModal.showEmediaModal();
                this.$refs.emediaModal.showCallerWait(
                    this.$data.activedKey[this.type].name
                );
                const videoSetting = JSON.parse(localStorage.getItem('videoSetting'));
                const recMerge = (videoSetting && videoSetting.recMerge) || false;
                const rec = (videoSetting && videoSetting.rec) || false;
                this.onCallVideo({
                    chatType: this.type,
                    to: this.$data.activedKey[this.type].name,
                    rec,
                    recMerge
                });
            }
            else if (this.type == 'group') {
                this.getGroupMembers(this.$data.activedKey[this.type].groupid);
                this.$refs.addAvMembertModal.show();
            }
        },
        callVoice() {
            this.$refs.emediaModal.showEmediaModal();
            this.$refs.emediaModal.showCallerWait(
                this.$data.activedKey[this.type].name
            );
            const videoSetting = JSON.parse(localStorage.getItem('videoSetting'));
            const recMerge = (videoSetting && videoSetting.recMerge) || false;
            const rec = (videoSetting && videoSetting.rec) || false;
            this.onCallVoice({
                chatType: this.type,
                to: this.$data.activedKey[this.type].name,
                rec,
                recMerge
            });
        },
        readablizeBytes(value) {
            let s = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
            let e = Math.floor(Math.log(value) / Math.log(1024));
            return (value / Math.pow(1024, Math.floor(e))).toFixed(2) + ' ' + s[e];
        },

        // TODO 可以抽离到utils
        renderTime(time) {
            // const nowStr = new Date();
            // const localStr = time ? new Date(time) : nowStr;
            // const localMoment = moment(localStr);
            // const localFormat = localMoment.format("MM-DD hh:mm A");
            // return localFormat;
            var t = new Date(parseInt(time));
            var Y = t.getFullYear();
            var M = t.getMonth() + 1 < 10 ? '0' + (t.getMonth() + 1) : t.getMonth() + 1;
            var D = t.getDate() < 10 ? '0' + t.getDate() : t.getDate();
            var H = t.getHours() < 10 ? '0' + t.getHours() : t.getHours();
            var F = t.getMinutes() < 10 ? '0' + t.getMinutes() : t.getMinutes();
            var S = t.getSeconds() < 10 ? '0' + t.getSeconds() : t.getSeconds();
            return `${M}-${D} ${H}:${F}`;
        },
        getLastMsg(item) {
            const { name, params } = this.$route;
            const chatList = this.chatList[name];
            let userId = '';
            if (name == 'contact') {
                userId = item.name;
            }
            else if (name == 'group') {
                userId = item.groupid;
            }
            else {
                userId = item.id;
            }
            const currentMsgs = chatList[userId] || [];
            let lastMsg = '';
            let lastType =
                currentMsgs.length && currentMsgs[currentMsgs.length - 1].type;
            if (currentMsgs.length) {
                if (lastType === 'img') {
                    lastMsg = '[image]';
                }
                else if (lastType === 'file') {
                    lastMsg = currentMsgs[currentMsgs.length - 1].filename;
                }
                else if (lastType === 'audio') {
                    lastMsg = '[audio]';
                }
                else if (lastType === 'vidio') {
                    lastMsg = '[vidio]';
                }
                else {
                    lastMsg = currentMsgs[currentMsgs.length - 1].msg;
                }
            }
            const msgTime = currentMsgs.length
                ? this.renderTime(currentMsgs[currentMsgs.length - 1].time)
                : '';
            return {
                lastMsg,
                msgTime
            };
        },
        scollBottom() {
            setTimeout(() => {
                const dom = this.$refs.msgContent;
                if (!dom) return;
                dom.scrollTop = dom.scrollHeight;
            }, 0);
        },
        handleCommand(item) {
            let name = '';
            if (this.type === 'contact') {
                name = this.$data.activedKey[this.type].name;
            }
            else if (this.type === 'group') {
                name = this.$data.activedKey[this.type].groupid;
            }
            else if (this.type === 'chatroom') {
                name = this.$data.activedKey[this.type].id;
            }
            this.recallMessage({
                to: name,
                message: item
            });
        },
        // getUserOnlineStatus(val){
        // 	const { ext } = val
        // 	console.log(ext==='', 'getUserOnlineStatus')
        // 	switch(ext){
        // 	case 'Offline':
        // 		return require('../../assets/Offline.png')
        // 	case 'Online':
        // 		return require('../../assets/Online.png')
        // 	case '':
        // 		return require('../../assets/Online.png')
        // 	case 'Busy':
        // 		return require('../../assets/Busy.png')
        // 	case 'Do not Disturb':
        // 		return require('../../assets/Do_not_Disturb.png')
        // 	case 'Leave':
        // 		return require('../../assets/leave.png')
        // 	default:
        // 		return require('../../assets/custom.png')
        // 	}
        // }
    }
};
</script>

<style scoped lang='less'>
.userlist {
    height: 100%;
    overflow-y: scroll;
    border-right: 1px solid #e8e8e8;
}

.byself {
    float: right;
}

.recallMsg {
    font-size: 12px;
    color: #aaa;
    width: 100%;
    text-align: center;
}

.name_box {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 14px;
}

.friend_portrait {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.custom-title {
    font-weight: 500;
    width: 100%;
    // height: 50px;
}

.custom-title-width {
    width: 290px;
    overflow: hidden;
    display: inline-block;
    line-height: 30px;
    padding-left: 20px;
}

.status_img {
    width: 18px;
    height: 18px;
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.moreMsgs {
    background: #ccc !important;
    border-radius: 8px;
    cursor: pointer;
}

.status {
    display: inline;
    position: relative;
    top: 20px;
    font-size: 12px;
    left: -6px;
    color: #736c6c;
}

.unreadNum {
    float: left;
    width: 100%;
}

.icon-style {
    position: absolute;
    right: 10px;
    top: 25%;
    display: inline-block;
    background-color: #f04134;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
    line-height: 1.5;
    text-align: center;
}

.emoji-style {
    width: 22px;
    float: left;
}

.img-style {
    max-width: 350px;
}

.time-style {
    clear: both;
    margin-left: 2px;
    // margin-top: 3px;
    font-size: 12px;
    color: #888c98;
    position: absolute;
    right: 5px;
}

.last-msg {
    width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 30px;
}

.file-style {
    width: 240px;
    margin: 2px 2px 2px 0;
    font-size: 13px;

    h2 {
        border-bottom: 1px solid #e0e0e0;
        font-weight: 300;
        text-align: left;
    }

    h3 {
        max-width: 100%;
        font-size: 15px;
        height: 20px;
        line-height: 20px;
        font-weight: 600;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        margin-bottom: 20px;
    }

    .bottom {
        span {
            color: #999999;
            text-align: left;
        }
    }

    a {
        color: #999999;
        float: right;
        text-decoration: none;
    }
}
</style>
